<!DOCTYPE html>
<html>
<head>


    <title>ATM后台管理系统</title>
</head>
<body class="bgf6">

<div th:include="common/boAtmHeader :: atmHeader"></div>

<div class="main-body pb100">
    <div class="container pt10">
        <div class="dflx sbt">

            <div th:include="common/boAtmLeft :: atmLeft"></div>

            <div class="body-right" id="app">
                <div class="bread-nav bgff">
                    <ul class="dflx">

                    </ul>
                </div>

                <div class="bgff mt10 pb20 edit-mode">
                    <div class="wrap">

                        <div class="box">
                            <div class="box-title"><span>工资单</span></div>
                            <div class="mt20 f14">
                                <div class="two">
                                    <span class="title"><i class="cred">*</i> 标题</span>
                                    <div class="content">
                                        <input type="text" id="salaryTitle" class="form-control parsley-error" value="" placeholder="请输入标题"/>
                                    </div>
                                    <span class="title">备注</span>
                                    <div class="content">
                                        <input type="text" id="remark" class="form-control" value="" placeholder="请输入备注"/>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="tc mt40">
                            <button onclick="createSalary();" type="button" class="btn btn-primary f12"> 保存 </button>
                        </div>

                        <!-- 上传文件的弹框 -->
                        <el-dialog
                                title="上传工资Excel文件"
                                :visible.sync="dialogVisible"
                                width="30%"
                                :before-close="handleClose">

                            <form id="salaryForm"  target="xxxxxxx" action="/salary/uploadSalaryFile" method="post" enctype="multipart/form-data">
                                请选择文件：<input type="file" name="salaryFile">
                                <input type="hidden" name="salaryId" v-model="selSalaryId">
                            </form>

                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="uploadExcel">确 定</el-button>
                              </span>
                        </el-dialog>


                        <!-- 表格明细弹出层 -->
                        <el-dialog title="工资单详情" :visible.sync="dialogDetailVisible">
                            <el-table :data="details">
                                <el-table-column property="detailId" label="ID" width="150"></el-table-column>
                                <el-table-column property="cardNum" label="卡号" width="200"></el-table-column>
                                <el-table-column property="amount" label="金额"></el-table-column>
                                <el-table-column property="statusValue" label="状态"></el-table-column>
                            </el-table>
                        </el-dialog>


                        <div class="tc mt40">
                            <el-table
                                    :data="salarys"
                                    border
                                    style="width: 100%">
                                <el-table-column
                                        fixed
                                        prop="salaryId"
                                        label="ID"
                                        width="150">
                                </el-table-column>
                                <el-table-column
                                        prop="fileTitle"
                                        label="标题"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="remark"
                                        label="备注"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="createTime"
                                        label="创建时间"
                                        width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="statusValue"
                                        label="状态"
                                        width="300">
                                </el-table-column>
                                <el-table-column
                                        fixed="right"
                                        label="操作"
                                        width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="openUpload(scope.row)" type="text" size="small">上传</el-button>
                                        <el-button @click="submitVerify(scope.row)" type="text" size="small">提交审核</el-button>
                                        <shiro:hasRole name="CFO">
                                            <el-button @click="approved(scope.row)" type="text" size="small">同意</el-button>
                                            <el-button @click="refuse(scope.row)" type="text" size="small">拒绝</el-button>
                                        </shiro:hasRole>

                                        <el-button @click="queryDetail(scope.row)" type="text" size="small">查看详情</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <iframe name="xxxxxxx" style="display: none"></iframe>
</div>

<script src="/js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/foundation-datepicker.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/foundation-datepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/bootstrap-table.min.js"></script>
<script src="/js/jquery.bs-table.js"></script>

<script src="/js/vue.js"></script>
<script src="/js/ele.js"></script>
<script src="/js/dayuanit.js"></script>

<script type="text/javascript">


    var boAtm = new Vue({
        el : '#app',
        data : {
            salarys : [],
            dialogVisible: false,
            dialogDetailVisible : false,
            selSalaryId : 0,
            details : []
        },
        created : function () {
            loadSalarys();
        },
        methods : {
            openUpload : function (row) {
                this.selSalaryId = row.salaryId;
                this.dialogVisible = true;
            },
            uploadExcel : function () {
                alert('are you upload?');
                $('#salaryForm').submit();
                this.dialogVisible = false;
            },
            submitVerify : function (row) {
                let salaryId = row.salaryId;
                dayuanit.ajax('/salary/submitVerify', {
                    salaryId : salaryId
                }, function (result) {
                    alert('提交成功');
                    loadSalarys();
                })
            },
            approved : function (row) {
                let salaryId = row.salaryId;
                dayuanit.ajax('/salary/approved', {
                    salaryId : salaryId
                }, function (result) {
                    alert('操作成功');
                    loadSalarys();
                })
            },

            refuse : function (row) {
                let salaryId = row.salaryId;
                dayuanit.ajax('/salary/refuse', {
                    salaryId : salaryId
                }, function (result) {
                    alert('操作成功');
                    loadSalarys();
                })
            },
            queryDetail : function (row) {
                let salaryId = row.salaryId;
                dayuanit.ajax('/salary/querySalaryDetail', {
                    salaryId : salaryId
                }, function (result) {
                    boAtm.dialogDetailVisible=true;
                    boAtm.details = result.data;
                })
            }
        }
    });

    function createSalary() {
        dayuanit.ajax('/salary/createSalary', {
            salaryTitle : $('#salaryTitle').val(),
            remark : $('#remark').val(),
        }, function (result) {
            alert('创建成功');
            loadSalarys();
        })
    }

    function loadSalarys() {
        dayuanit.ajax('/salary/loadSalarys', {}, function (result) {
            boAtm.salarys = result.data;
        })
    }

</script>

</body>
</html>
